<template>
  <div class="detail-main">
     <Back @back="back"/>
    <div>
      <van-swipe @change="onChange" class="product-swipe" :autoplay="3000" indicator-color="#abc">
        <van-swipe-item v-for="item in images" :key="item">
          <img v-lazy="item">
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
      <div class="product-desc">
        <div class="price-share item">
          <span class="bz font-color-red">￥</span>
          <span class="org font-color-red">0.01</span>
          <span class="vip">￥0.01</span>
          <img
            class="image"
            src=""
          >
          <span class="share">
            <van-icon name="gem-o"/>
          </span>
        </div>
        <div class="introduce item">70gA4黑白打印复印</div>
        <van-row class="item">
          <van-col span="8">原价:￥0.5</van-col>
          <van-col span="8">库存:7606张</van-col>
          <van-col span="8">销量:1928张</van-col>
        </van-row>
        <van-cell class="all-coupon" value="更多" is-link v-show="false">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="content">
              <span class="custom-title">优惠券：</span>
              <span class="activity">满50减100</span>
              <span class="activity">满50减100</span>
              <span class="activity">满50减100</span>
              <span class="activity">满50减100</span>
              <span class="activity">满50减100</span>
              <span class="activity">满50减100</span>
            </div>
          </template>
        </van-cell>
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          border=""
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showCouponList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showCouponList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px;"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChangeYh"
            @exchange="onExchange"
          />
        </van-popup>
        <van-sku
          v-model="showChoosePanel"
          stepper-title="我要买"
          :sku="sku"
          :goods="goods"
          :goods-id="goodsId"
          :quota="quota"
          :quota-used="quotaUsed"
          :hide-stock="sku.hide_stock"
          show-add-cart-btn
          reset-stepper-on-hide
          :initial-sku="initialSku"
          @buy-clicked="onBuyClicked"
          @add-cart="onAddCartClicked"
        >
          <!-- 自定义 sku-header-price -->
          <template #sku-header-price="props">
            <div class="van-sku__goods-price">
              <span class="van-sku__price-symbol">￥</span>
              <span class="van-sku__price-num">{{ props.price }}</span>
            </div>
          </template>
          <!-- 自定义 sku actions -->
          <template #sku-actions="props">
            <div class="van-sku-actions">
              <van-button square size="large" type="warning" @click="showCouponList = true">积分兑换</van-button>
              <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
              <van-button
                square
                size="large"
                type="danger"
                @click="props.skuEventBus.$emit('sku:buy')"
              >立即购买</van-button>
            </div>
          </template>
        </van-sku>
        <!-- 地址选择 -->
        <van-cell class="chose-info" value="" @click="choseInfo" is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="chose">请选择</div>
          </template>
        </van-cell>
        <!-- 门店信息 -->
        <div class="shop-info">
          <van-cell title="店铺信息" value="" @click="choseInfo" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
          </van-cell>
          <div class="shop-info-body">
            <div class="pictrue">
              <img src="https://image.dayouqiantu.cn/noMeal_tt.png">
            </div>
            <div class="name-info">
              <div class="shop-name">店铺2</div>
              <div class="shop-address">
                <span class="text">河南省信阳市</span>
                <span class="iconfont icon-youjian"></span>
              </div>
            </div>
            <div class="contact-info">
              <a href="tel:15136175234" class="iconfont icon-dadianhua01 font-color-red phone">Phone</a>
              <div class="addressTxt">距离446.86千米</div>
            </div>
          </div>
        </div>
        <!-- 用户好评 -->
        <div class="comment-info">
          <van-cell title="用户好评" @click="choseInfo" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <span>75% 好评</span>
          </van-cell>
          <div class="comment-body">
            <div class="evaluateWtapper">
              <div class="evaluateItem">
                <div class="pic-text acea-row row-middle">
                  <div class="pictrue">
                    <img src="https://image.dayouqiantu.cn/分类.png" class="image">
                  </div>
                  <div class="acea-row row-middle">
                    <div class="name line1">hueng</div>
                    <!-- <van-rate value={3} /> -->
                  </div>
                </div>
                <div class="time"></div>
                <div class="evaluate-infor">此用户没有填写评价</div>
                <div class="imgList acea-row">
                  <div class="pictrue">
                    <img src="https://image.dayouqiantu.cn/timg (1).jpg" class="image">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 商品详情 -->
        <div class="product-info">
          <div class="title">产品介绍</div>
          <div class="conter">
            <p style="text-align: center;">
              <br>
            </p>
            <p style="text-align: center;">
              <strong>&nbsp; &nbsp;实体店面经营 保质保量</strong>
            </p>
            <p style="text-align: center;">
              <strong>A4黑白2毛/张，量大1毛/张，</strong>
            </p>
            <p style="text-align: center;">
              <strong>A3黑白双面5毛/张，量大3毛/张，</strong>
            </p>
            <p style="text-align: center;">
              <strong>更大量请联系店主报价，</strong>
            </p>
            <p style="text-align: center;">
              <strong>每消费1元可积1分，1分抵现金1毛，</strong>
            </p>
            <p style="text-align: center;">
              <strong>付款时直接抵扣</strong>
            </p>
            <p style="text-align: center;">
              <strong>（如此优惠的基础上还可积分，积分抵现金）</strong>
            </p>
            <p style="text-align: left;">
              <strong>
                <br>
              </strong>
            </p>
            <p>
              <br>
            </p>
            <p>
              &nbsp; &nbsp;&nbsp;
              <img
                style="max-width: 100%;"
                src="https://image.dayouqiantu.cn/5ca03007150f1.jpg"
              >
            </p>
            <p>
              <br>
            </p>
            <p>
              <br>
            </p>
            <p>
              <br>
            </p>
            <p>
              <br>
            </p>
            <p>
              <br>
            </p>
          </div>
        </div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-button color="#be99ff" type="warning" @click="choseInfo" text="加入购物车"/>
      <van-goods-action-button color="#7232dd" type="danger" @click="choseInfo" text="立即购买"/>
    </van-goods-action>
    <div style="height:1.3rem;"></div>
  </div>
</template>

<script>
import Back from "@/components/public/Back";

const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元"
};

export default {
   components: {
    Back
  },
  data() {
    return {
      current: 0,
      images: [
        "http://www.wennn.top:8802/static/images/h1.jpg",
        "http://www.wennn.top:8802/static/images/h2.jpg",
        "http://www.wennn.top:8802/static/images/h3.jpg"
      ],
      showCouponList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      quota: 1,
      quotaUsed: 20,
      showChoosePanel: false,
      sku: {
        // 数据结构见下方文档
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            v: [
              {
                id: "30349", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "https://img.yzcdn.cn/1.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "https://img.yzcdn.cn/1p.jpg" // 用于预览显示的规格类目图片
              },
              {
                id: "1215",
                name: "蓝色",
                imgUrl: "https://img.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img.yzcdn.cn/2p.jpg"
              }
            ],
            k_s: "s1" // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "1215", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1193", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 110 // 当前 sku 组合对应的库存
          }
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "" // 可选值，占位文本
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      },
      goodsId: 1,
      goods: {
        // 数据结构见下方文档
        goodsId: 1,
        id: 1,
        name: "wenn",
        pic: "",
        picture: "https://img.yzcdn.cn/1.jpg"
      },
      messageConfig: {
        // 数据结构见下方文档
        // 自定义限购文案
        quotaText: "每次限购xxx件",
        // 自定义步进器超过限制时的回调
        handleOverLimit: data => {
          const { action, limitType, quota, quotaUsed, startSaleNum } = data;

          if (action === "minus") {
            this.Toast(
              startSaleNum > 1 ? `${startSaleNum}件起售` : "至少选择一件商品"
            );
          } else if (action === "plus") {
            // const { LIMIT_TYPE } = Sku.skuConstants;
            if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
              let msg = `单次限购${quota}件`;
              if (quotaUsed > 0) msg += `，你已购买${quotaUsed}`;
              this.Toast(msg);
            } else {
              this.Toast("库存不够了");
            }
          }
        },
        // 步进器变化的回调
        handleStepperChange: currentValue => {},
        // 库存
        stockNum: 1999,
        // 格式化库存
        stockFormatter: stockNum => {}
      },
      initialSku: {
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: "30349",
        s2: "1193",
        // 初始选中数量
        selectedNum: 3,
        // 初始选中的商品属性
        // 键：属性id
        // 值：属性值id列表
        selectedProp: {
          123: [1222]
        }
      }
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    onChangeYh(index) {
      this.showCouponList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    onBuyClicked() {}, 
    choseInfo() {
      this.showChoosePanel = !this.showChoosePanel;
    },
    onAddCartClicked() {}
  },
  created() {},
  mounted() {}
};
</script>

<style lang="less">
.font-color-red {
  color: red;
}

.detail-main {
  // background-color: #f5f5f5;
  .product-desc {
    // background: #fff;
background: rgb(245, 245, 245);

    .item {
      padding: 0.2rem 0.3rem;
      background: #fff;
      margin: 0.01rem;
    }
    .price-share {
      align-items: center;
      -webkit-box-pack: justify;
      -o-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      color: #333333;
      .bz {
        font-size: 0.2rem;
      }
      .vip {
        font-size: 0.4rem;
      }
      .van-icon {
        font-size: 0.6rem;
      }
      .share {
        float: right;
      }
      .image {
        width: 0.66rem;
      }
    }
    .introduce {
      font-size: 0.5rem;
    }
    .van-row {
      color: #82848f;
      font-size: 0.3rem;
    }
    .all-coupon {
      .content {
        width: 6rem;
        height: 0.6rem;
        overflow: hidden;
        .activity {
          height: 0.4rem;
          padding: 0 0.2rem;
          border: 1px solid #f2857b;
          color: #e93323;
          font-size: 0.24rem;
          line-height: 0.4rem;
          position: relative;
          margin: 0.19rem 0 0.19rem 0.15rem;
        }
      }
    }

    .shop-info {
      .shop-info-body {
        padding: 0 0.2rem;
        height: 1.4rem;
        display: flex;
        .pictrue {
          width: 1.5rem;
          height: 1.5rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .name-info,
        .contact-info {
          display: flex;
          align-items: center;
          display: block;
          padding: 0.3rem;
        }
        .name-info {
          width: 45%;
          .shop-name {
            font-size: 0.4rem;
          }
          .shop-address {
            font-size: 0.3rem;
          }
        }
        .contact-info {
          font-size: 0.3rem;
        }
      }
    }

    .comment-info {
      .evaluateWtapper .evaluateItem {
        background-color: #fff;
        padding-bottom: 0.25rem;
        .pictrue {
          width: 1.6rem;
          height: 1.6rem;
          margin: 0 0 0.15rem 0.15rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .pic-text {
          display: flex;
          align-items: center;
          font-size: 0.26rem;
          color: #282828;
          height: 1.4rem;
          padding: 0 0.3rem;
          .van-rate {
            i {
              font-size: 0.3rem;
            }
          }
          .pictrue {
            width: 0.56rem;
            height: 0.56rem;
            margin-right: 0.2rem;
          }
        }
        .time {
          font-size: 0.24rem;
          color: #82848f;
          padding: 0 0.3rem;
        }
        .evaluate-infor {
          font-size: 0.28rem;
          color: #282828;
          margin-top: 0.19rem;
          padding: 0 0.3rem;
        }
        .imgList {
          padding: 0 0.3rem 0 0.15rem;
          margin-top: 0.25rem;
        }
      }
    }

    .product-info {
      .title {
       font-size: 0.6rem;
    color: #282828;
    width: 100%;
    text-align: center;
    line-height: 2;
      }
      .conter{
          line-height: 1.3;
        p{
          font-size: .4rem;
        }
      }
    }
    .shop-info,
    .chose-info,
    .product-info .title,
    .comment-info {
      margin-top: 0.2rem;
      background: #fff;
    }
  }
}
.product-swipe {
  height: 9.6rem;
  width: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.van-goods-action {
  position: fixed;
  bottom: 0px;
}
</style>


